<#include "/common/common.ftl">
<@html>
<script type="text/javascript" src="${path}/js/dojo/dojo/inputForm.js"></script>
<script type="text/javascript" src="${path}/js/dojo/dojo/checkboxTree.js"></script>
<#--<script type="text/javascript">-->
<#--dojo.require("dijit.dijit");-->
<#--dojo.require("dijit.form.Form");-->
<#--dojo.require("dijit.form.ValidationTextBox");-->
<#--dojo.require("dijit.form.FilteringSelect");-->
<#--dojo.require("dojo.data.ItemFileWriteStore");-->
<#--dojo.require("widget.checkboxtree.CheckBoxTree");-->
<#--</script>-->
<link rel="stylesheet" href="${path}/js/dojo/widget/checkboxtree/themes/${theme}/CheckboxTree.css"/>
<form id="detailForm" method="post" dojoType="dijit.form.Form">
	<input type="hidden" name="role.id" value="${role.id!}"/>
	<input type="hidden" name="roleAuth" id="roleAuth"/>

	<div class="small-form-layout">
		<div class="cell">
			<div class="label">
				角色编号<@splitor/>
			</div>
			<div class="content">
				<input name="role.roleCode" dojoType="dijit.form.ValidationTextBox"
				       type="text" required="true"
				<#--promptMessage="请输入角色编号" -->
				       invalidMessage="只能输入数字或者字母" id="roleCode"
				       value="${role.roleCode!}"/>
			</div>
		</div>
		<div class="cell">
			<div class="label">
				角色名称<@splitor/>
			</div>
			<div class="content">
				<input name="role.roleName" dojoType="dijit.form.ValidationTextBox"
				       type="text" class="middle" required="true"
				<#--promptMessage="请输入角色名称" -->
				       invalidMessage="只能输入数字或者字母!" id="roleName"
				       value="${role.roleName!}"/>
			</div>
		</div>
		<div class="cell">
			<div class="label">
				<label>
					所属机构<@splitor/>
				</label>
			</div>
			<div class="content">
				<div dojoType="dijit.form.FilteringSelect" store="organizationStore" name="role.organizationId"
				     labelAttr="text" value="${(role.organizationId)!}" searchAttr="text" autoComplete="true"
				     required="false">
				</div>
			</div>
		</div>
		<div class="cell">
			<div class="label">
				<label for="active">是否启用：</label>
			</div>
			<div class="content">
			<@checkbox name="role.active" id="active" value=role.active />
			</div>
		</div>
	</div>
	<div class="clear"></div>
</form>
<div jsId="menu" dojoType="widget.checkboxtree.CheckBoxTree" allowMultiState="true" nodeIcons="true"
     style="text-align:left;height:400px;margin-top:10px;margin-left:20px;"
     branchIcons="tree" model="model" openOnClick="true">
</div>
<@listButton btnClear=false/>
<script type="text/javascript">
	var organizationStore = new dojo.data.ItemFileReadStore({
		data:{
			identifier:"value",
			label:"text",
			items:[
				<#list organization![] as option>
					<#if (option_index > 0 )>
						,
					</#if>
					{value:"${option.value!}",text:"${option.text!}"}
				</#list>
			]
		}
	});
	var menuArr = [${roleAuth!}];
	var store = new dojo.data.ItemFileWriteStore({
		url: "${path}/system/role.loadMenuTree.do?role.id=${(role.id)!}"
	});
	var model = new widget.checkboxtree.CheckBoxStoreModel({
		store: store,
		rootLabel: '功能列表',
		checkboxAll:  true,
		checkboxRoot: true,
		checkboxState: true,
		checkboxStrict: true,
		onCheckboxChange:function(storeItem) {
			if (storeItem && this.store.isItem(storeItem)) {
				var state = this.getCheckboxState(storeItem);
				var id = this.store.getValue(storeItem, "id");
				if (state.checked == true) {
					menuArr.push(id);
				}
				if (state.checked == false) {
					for (var i = 0; i < menuArr.length; i++) {
						if (id == menuArr[i]) {
							menuArr.splice(i, 1);
						}
					}
				}
			}
		}
	});
	dojo.ready(function() {
		dojo.connect(dijit.byId("btnSave"), "onClick", function() {
			dojo.byId("roleAuth").value = menuArr.join(",");
			dojo.xhrPost({
				url:"${path}/system/role.save.do",
				form:dojo.byId("detailForm"),
				handleAs:"json",
				load:function(json) {
					handleJsonMessage({
						message:json,
						callback:function() {
							parent.publish("role/save");
							parent.closeDialog();
						}
					});
				}
			});
		});
	});
</script>
</@html>